<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="bookmark" href="http://www.101test.com/assets/img/favicon.ico">
		<link rel="shortcut icon" href="http://www.101test.com/assets/img/favicon.ico">		
		<link rel="stylesheet" href="./reportdir/sets.min.css" th:href="@{/static/pages/reportdir/sets.min.css}" media="all">
		<link rel="stylesheet" href="./reportdir/base.min.css" th:href="@{/static/pages/reportdir/base.min.css}" media="all">
		<link rel="stylesheet" href="./reportdir/app.css" th:href="@{/static/pages/reportdir/sets.min.css}" media="all">
		<link rel="stylesheet" href="./reportdir/font-awesome.min.css" th:href="@{/static/pages/reportdir/font-awesome.min.css}" media="all">
		<link rel="stylesheet" href="./reportdir/moon.css" th:href="@{/static/pages/reportdir/moon.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/report.css" th:href="@{/static/pages/reportdir/report.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/msg.css" th:href="@{/static/pages/reportdir/msg.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/form.css" th:href="@{/static/pages/reportdir/form.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/view-report-feedback.css" th:href="@{/static/pages/reportdir/view-report-feedback.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/bootstrap-datetimepicker.css" th:href="@{/static/pages/reportdir/bootstrap-datetimepicker.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/moon(1).css" th:href="@{/static/pages/reportdir/moon(1).css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/social-share.css" th:href="@{/static/pages/reportdir/social-share.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/select.css" th:href="@{/static/pages/reportdir/select.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/login.css" th:href="@{/static/pages/reportdir/login.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/frontsearch.css" th:href="@{/static/pages/reportdir/frontsearch.css}" media="all">
		<link charset="utf-8" rel="stylesheet" href="./reportdir/share.css" th:href="@{/static/pages/reportdir/share.css}" media="all">
		<link rel="stylesheet" href="./reportdir/index.css" th:href="@{/static/pages/reportdir/index.css}" media="all">
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js" th:src="@{static/js/jquery-1.9.1.min.js}"></script>
		<script type="text/javascript" src="../js/echarts.js" th:src="@{static/js/echarts.js}"></script>
		<link charset="utf-8" rel="stylesheet" href="../layuiadmin/layui/css/layui.css" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js" th:src="@{static/js/jquery-1.9.1.min.js}"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" th:src="@{static/js/bootstrap.min.js}"></script>
		<link rel="stylesheet" href="../css/res/layui/css/layui.css" th:href="@{static/css/res/layui/css/layui.css}" media="all">
		<script src="../layuiadmin/layui/layui.js" th:src="@{static/layuiadmin/layui/layui.js}"></script>
		<style>
			/*.main{
				margin-left: auto;
				margin-right: auto;
				width: 80%;
			}*/
			/*.top{
				margin-right: auto;
				margin-left: auto;
				width: 90%;
				height: 50px;
				background-color: #BDBDBD;
			}*/
			.main{
				margin-top: 30px;
/*				border:3px solid #AFB9C3;*/
			}
			/*.main-left{
				display: inline;
        		height: 2000px;
				float: left;
				margin-left: 4%;
				width: 60%;
				margin-right: 10px;
				border:3px solid #C3BFBF;
			}*/
			.main-center{
/*				display: inline;*/
/*        		height: 2000px;*/
/*				float: left;*/
				margin-left:auto;
				margin-right: auto;
				width: 60%;
				border:3px solid #C3BFBF;
			}
			.main-right{
/*				display: inline;*/
				position: fixed;
				float: left;
				margin-left: 67%;
				width: 30%;
/*				height: 200px;*/
/*				background-color: #0B6FA2;*/
			}
			.head1{
/*				background-color:#E2E2E2;*/
				background-color: #EDEDED;
			}
			a:link {color:#000000;}    /* unvisited link */
			a:visited {color:#000000;} /* visited link */
			a:hover {color:#858585}   /* mouse over link */
			a:active {color:#204D74;}
			/*.item{
				border: 1px;
				border-color: #000000;
			}*/
		</style>
		
		<script type="text/javascript">
			$(function(){
				$("#export1").click(function(){
/* 				alert(1) */
				var paper_id = $(this).next().val();
				var paper_name = $(this).next().attr("title");
/* 				alert(paper_id)
				alert(paper_name) */
				$.ajax({
					type:"get",
					url:"/export1",
					async:true,
					data:{
						"paper_id":paper_id,
						"paper_name":paper_name
					},
					dataType:"text",
					success:function(e){
						if(e == "true"){
							alert("导出成功，请前往桌面查看")
						}else{
							alert("导出失败，请稍后再试")
						}
					},
					error:function(e){
						alert("系统异常！")
					}
				});
			})
			$("#export").click(function(){
/* 				alert(1) */
				var paper_id = $(this).prev().val();
				var paper_name = $(this).prev().attr("title");
//				alert(paper_id)
//				alert(paper_name)
				$.ajax({
					type:"get",
					url:"/export",
					async:true,
					data:{
						"paper_id":paper_id,
						"paper_name":paper_name
					},
					dataType:"text",
					success:function(e){
						if(e == "true"){
							alert("导出成功，请前往桌面查看")
						}else{
							alert("导出失败，请稍后再试")
						}
					},
					error:function(e){
						alert("系统异常！")
					}
				});
			})
			})
		</script>
	</head>
	<body>
		<div class="main">
			  <div class="modal fade" id="myModal">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
									  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							</div>
							<div class="modal-body">
									<h4 class="modal-title" align="center">查询成绩区间</h4>
									<br/>
									<form class="form-horizontal" role="form">
										<div class="form-group">
											<label for="name" class="col-sm-offset-2 col-sm-2 control-label">起始成绩</label>
											<div class="col-sm-5">
												<input type="text" class="form-control" id="beginscore" placeholder="请输入起始成绩">
											</div>
										</div>
										<div class="form-group">
											<label for="password" class="col-sm-offset-2 col-sm-2 control-label">终止成绩</label>
											<div class="col-sm-5">
												<input type="text" class="form-control" id="endscore" placeholder="请输入终止成绩">
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-4 col-sm-5">
												<button id="submitBtn" type="button" class="btn btn-default btn-block btn-primary">查询</button>
											</div>
										</div>
										</form>
							</div>
							<div class="modal-footer">
								<input id="stu_num" type="hidden" th:value="${stu_num}" th:title="${stu_num}"/>
								<center>
								<div id="loading" style="display: none;">
									该成绩分段总人数占：
									<span id="num_result" ></span>
									人, 占比：
									<span id="num_rate" ></span>
									%
								</div>
								</center>
							</div>
						</div>
						<!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
		<div class="main-center">
		<div id="report-list-panel">
		    <div>			    
			    <div class="btn-group export-report">
			        <div class="layui-btn-group">
					  <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary">
					    <i class="layui-icon">&#xe654;</i>
					  </button>
					  <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary" id="export1">
					  	<a>
					    <i class="layui-icon">&#xe655</i>
					    <span>导出考试汇总表</span>
					    </a> 
					  </button>
					  <input type="hidden" th:value="${paper_id}" th:title="${paper_name}"/>
					  <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary" id="export">
					  	<a>
					    <i class="layui-icon">&#xe621</i>
					    <span>导出考试详情表</span>
					    </a>
					  </button>
					  
					  <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary" id="tbox">
					  	<a>
					    <i class="layui-icon">&#xe615</i>
					    <span>查询成绩分段</span>
					    </a>
					 </button>
					 <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary" id="">
					  	<a href="/export" th:href="@{/preview(paper_id=${paper_id})}">
					    <i class="layui-icon">&#xe63c</i>
					    <span>查看试卷详情</span>
					    </a>
					  </button>
					  <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary">
					    <i class="layui-icon">&#xe602;</i>
					  </button>
					</div>
			    </div>			
		    </div>
		    
		    
		    <table class="table table-striped report-list" data-link="class{merge:condensed toggle=&#39;report-list-condensed&#39;}">
		    	<thead class="head1">
		    		<tr class="report-header">
		    			<th>
		                    <!--<input class="btn-select-all" type="checkbox" data-link="_selectAll">-->
		               </th>
		               <th></th>
		               <th style="text-align:left;padding-left:20px;">&nbsp;&nbsp;姓名</th>
		               <th class="report-sortable" data-sort="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生成时间
		                    <!--<i data-link="class{:asc?&#39;fa fa-sort-asc text-mint&#39;:&#39;fa fa-sort-desc text-mint&#39;}" class="fa fa-sort-desc text-mint"></i>-->
		               </th>
		               <th class="report-sortable" data-sort="1">分数
		               </th>
		               <th>总分</th>
		               <th>已判卷</th>
		               <!--<th data-jsv="#38^/38^#39^#26_/26_/39^">
		                    <i class="fa fa-download"></i>
		                </th>-->
		    		</tr>
		    	</thead>
 		        <div th:remove="(${hashMap.answeredpapers} == null)? all:none">
		        	<div th:each="answeredpaper:${hashMap.answeredpapers}" >
		        	<div th:each="report:${hashMap.reports}"  th:remove="(${answeredpaperStat.count} == ${reportStat.count})? none:all">
		        		<div th:each="student:${hashMap.students}"  th:remove="(${answeredpaperStat.count} == ${studentStat.count})? none:all" th:with="datatime=${report.endTimestamp}">      
				        <tbody data-jsv-df="" class="item">
				        	<tr data-jsv="#41^#28_#78_" class="report-item">
				        	<td style="width:30px;vertical-align:middle;">
					        </td>
					        
					        <td style="width: 30px;">
					            <img class="img-circle candidate-portrait"  src="reportdir/portrait_default_9.png" th:src="@{static/pages/reportdir/portrait_default_9.png}" width="40px" height="40px">
					        </td>
					        
					        <td style="width:10%;vertical-align:middle;">
					            <a class="btn btn-link candidate-name fb" target="_blank" title="" th:text="${student.name}" th:href="@{/marking(report_id=${report.reportId},answeredpaper_id=${answeredpaper.ansPaperId})}">哈哈哈</a>
					        </td>
					        <td style="min-width:135px;vertical-align:middle;" th:text="${#dates.format(datatime,'yyyy-MM-dd hh:mm:ss')}">2019-06-14 16:18</td>
					        <td  style="width: 60px;vertical-align:middle;" th:text="${report.acquiredScore}">&nbsp;30</td>
					        
					        <td style="width:30%;vertical-align:middle;" th:text="${report.totalScore}">&nbsp;30
					        </td>
					        
					        <td style="vertical-align:middle;" th:text="(${answeredpaper.isModifiedByTeacher} == '1')? '是':'否'">&nbsp;&nbsp;&nbsp;&nbsp;是
					        </td>
				        </tr>
				        </tbody>
		        		</div>
		        	</div>
		        	</div>
 		        </div>		    
		</div>
		</div>
		</div>
		<input type="hidden" id="length" th:value='${hashMap.students.size()}'>
		<input type="hidden" id="students" th:value='${hashMap.students}'>
		<input type="hidden" id="reports" th:value='${hashMap.reports}'>
	<script>
//	  	$(function(){
//		  		var mychars = echarts.init(document.getElementById('main1'));
//			
//				mychars.showLoading();//数据加载完之前,显示一段简单的动画
//				//定义2个数组
//				var names=[];// 专门存放类型
//				var scores=[];//专门存放数据
//				var length = $("#length").val();
//				var student = $("#students").val();
//				var reports = $("#reports").val();
//				for(var i=0;i<length;i++){
//					names.push(student[i].name);
//					scores.push(reports[i].acquiredScore);
//				}
//				mychars.hideLoading();//隐藏上面加载的动画
//				// 图表插件动态转载数据的方法
//				mychars.setOption({
//					title:{text:'学生成绩分布'},
//					tooltip:{trigger:'axis'},//鼠标滑动到图表上的效果
//					legend:{data:['成绩']}, // 图形说明
//					xAxis:{data:names},//横坐标
//					yAxis:{},
//					series:[{
//						name:'成绩',
//						type:'bar',// 图表类型 , 可以切换柱状图bar,折线图line
//						data:scores
//					}] // 图形类型,数据值
//				});
//					
//				// 图表随着浏览器窗体变化而变化
//				window.onresize = function(){
//					mychars.resize();
//				}
//	  	})
  </script>


<script type="text/javascript">
$(function(){

	$("#tbox").click(function(){
		$('#myModal').modal('show') //显示模态框
	})
	
	$("#submitBtn").click(function(){
		var beginscore = $('#beginscore').val();
		var endscore = $('#endscore').val();
		var totalnum = $('#length').val();
		if(beginscore==""||endscore=="")
		{
			layui.use(['layer', 'form'], function(){
		  		var layer = layui.layer
		  			,form = layui.form;
		  			layer.msg('请补全成绩区间...');
			});
			return;
		}
		if(beginscore<0||endscore<0||beginscore>200||endscore>200||beginscore>endscore)
		{
			layui.use(['layer', 'form'], function(){
		  		var layer = layui.layer
		  			,form = layui.form;
		  			layer.msg('非法的成绩区间...');
			});
			return;
		}
		var datas={"beginscore":beginscore,"endscore":endscore};
		$.ajax({
	        	type:"post",
	        	url:"searchScore",
	        	async:true,
	        	dataType:'json',//'application/json;charset=UTF-8',//request请求的类型是json类型,字符编码是utf-8
				data:datas,//将json对象转换成字符串,再向后台传递
				success:function(result){
					$("#num_result").html(result);
					$('#num_rate').html((result*1.0/totalnum)*100);
					$("#loading").css("display","block"); 
				},
				error:function(result){
					console.log(e);
					layui.use(['layer', 'form'], function(){
				  		var layer = layui.layer
				  			,form = layui.form;
				  			layer.msg('服务器开小差了...');
					});
				}
	        });
	})
});

</script>
	</body>
</html>
